<template>
    <div class="app-container">
        <div class="card-box">
            <el-card class="box-1">
                <h2>您好，管理员</h2>
                <p>问卷数量：<span>{{ 48 }}</span></p>
                <p>问卷模板：<span>{{ 12 }}</span></p>
            </el-card>
            <el-card class="box-2">
                <div class="box-body">
                    <div>
                        <p>未发布问卷</p>
                        <p class="num">24</p>
                    </div>
                    <div>
                        <p>已发布问卷</p>
                        <p class="num">12</p>
                    </div>
                    <div>
                        <p>已结束问卷</p>
                        <p class="num">12</p>
                    </div>
                </div>
            </el-card>
        </div>
        <div>
            <el-card>
                <div class="chart" id="chart"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Home',
  data() {
    return {
		chartInstance: null
    }
  },
  async mounted() {
	  await this.initChart()
  },
  methods: {
    initChart() {
		const myChart = echarts.init(document.getElementById('chart'));
		const dateList = this.getDateArray({ days: 15, direction: 'past' })
		const valueList = dateList.map(() => {
			return Math.floor(Math.random() * 1000);
		});
		const option = {
			grid: {
				top: 20,
				bottom: 30,
				left: 50,
				right: 20
			},
			tooltip: {
				trigger: 'axis'
			},
			xAxis: {
				type: 'category',
				data: dateList
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: valueList,
					type: 'line',
					smooth: true
				}
			]
		};
		myChart.setOption(option);
    },
	getDateArray(options = {}) {
		const {
			days = 15,
			format = 'YYYY-MM-DD',
			direction = 'past' // past|future
		} = options;

		const dateFormatter = (date) => {
			// 可根据 format 参数实现不同格式化逻辑
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		};

		const dates = [];
		const baseDate = new Date();
		
		for (let i = days - 1; i >= 0; i--) {
			const date = new Date(baseDate);
			const offset = direction === 'past' ? -i : +i;
			date.setDate(date.getDate() + offset);
			dates.push(dateFormatter(date));
		}

		return dates;
	}
  }

}
</script>
<style scoped>
.card-box {
    display: flex;
    height: 230px;
	width: 100%;
    margin-bottom: 24px;
}
.card-box .box-1 {
    flex: 0 0 32.33333333%;
    margin-right: 24px;
}
.card-box .box-2 {
    flex: 0 0 65.66666667%;
}
.box-1 h2 {
    padding: 20px 16px 40px 16px;
}
.box-1 p {
    height: 44px;
    line-height: 44px;
    color: #B1B2B3;
    padding: 0 16px;
}
.box-1 p span {
    font-weight: 400;
    font-size: 20px;
    color: #1A1B1C;
    padding-left: 20px;
}
.box-body{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding-top: 40px;
}
.box-body div {
    flex: 1;
}
.box-body p.num {
    font-size: 36px;
    font-weight: 400;
    color: #1A1B1C;
    padding-top: 10px;
    cursor: pointer;
}
.chart{
    width: 100%;
    height: 300px;
}
</style>
